"use client"
import Link from "next/link";
import Image from "next/image";
import {HiOutlineShoppingBag} from "react-icons/hi2";
import {IoSearchOutline} from "react-icons/io5";
import {usePathname} from "next/navigation";
import {RiAppsLine, RiChat3Line} from "react-icons/ri";

const links = [
    {
        label: '首页',
        link: '/'
    }, {
        label: '产品',
        link: '/product'
    }, {
        label: '新闻与活动',
        link: '/news'
    }, {
        label: 'HarmonyOS',
        link: '/dev'
    }, {
        label: '关于',
        link: '/about'
    },
]

export default function Header() {
    const path = usePathname()
    const isCurrent = (link: string) => {
        if (link === path) {
            return true
        }
        if (link === '/' && path !== '/') {
            return false
        }
        return path.startsWith(link)

    }
    return (
        <header>
            <WebsiteNoticeBar/>
            <div
                className={"z-50 sticky top-0 h-[64px] group flex items-center text-black bg-[#ffffff] transition-all duration-500"}>
                <div className={"flex items-center justify-between min-w-[1280px] mx-auto"}>
                    <ul className={"flex items-center gap-x-4 justify-start transition-all duration-500"}>
                        <Link href={'/'} className={"mr-6 cursor-pointer"}>
                            <Image
                                src={'https://www-file.huawei.com/-/media/corporate/images/home/logo/huawei_logo.png'}
                                alt={'logo'} width={135} height={25}/>
                        </Link>
                        {
                            links.map((item, index) =>
                                <li key={index}>
                                    <Link className={`hover:font-bold ${isCurrent(item.link) ? 'font-bold' : ''}`}
                                          href={item.link}>{item.label}</Link>
                                </li>
                            )
                        }
                    </ul>
                    <div className={"flex items-center gap-x-4 text-black"}>
                        <Link href={'/product'} className={"rounded-full  px-4 py-1 "}>
                            <HiOutlineShoppingBag size={24}/>
                        </Link>
                        <Link href={'/product'}>
                            <IoSearchOutline size={24}/>
                        </Link>
                    </div>
                </div>
            </div>
        </header>

    )
}

function WebsiteNoticeBar() {

    return (
        <div className={"h-[24px] bg-black flex justify-end items-center gap-x-4 text-white px-20"}>
            <Link href={'https://houcloud.com'} className={"text-xs text-gray-300 flex items-center gap-x-1"}>
                <RiAppsLine/>
                个人网站
            </Link>
            <Link href={'https://dev.lateotu.com'} className={"text-xs text-gray-300 flex items-center gap-x-1"}>
                <RiChat3Line/>
                学习交流
            </Link>
        </div>
    )

}
